<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <!-- Title -->
    <title>Music</title>

    <!-- Favicon -->
    <link rel="icon" href="img/material/icon.jpg">

    <!-- Style CSS -->
    <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/classy-nav.css">
    <!-- Comment Css -->
    <link rel="stylesheet" href="css/comments.css">

</head>
<style>
    .single_comment_area:nth-child(odd) {
        margin-left: 50px;
    }

    li,
    ul {
        list-style: none;
    }
    .classynav-login{
        display: none;
    }
    body{
        background-color:white;
    }
</style>

<body>
    <!-- Preloader -->
    <div id="preloader">
        <div class="preload-content">
            <div id="original-load"></div>
        </div>
    </div>

    <!-- Subscribe Modal -->
    <div class="subscribe-newsletter-area">
        <div class="modal fade" id="subsModal" tabindex="-1" role="dialog" aria-labelledby="subsModal"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <div class="modal-body">
                        <h5 class="title">Subscribe to my newsletter</h5>
                        <form action="#" class="newsletterForm" method="post">
                            <input type="email" name="email" id="subscribesForm2" placeholder="Your e-mail here">
                            <button type="submit" class="btn original-btn">Subscribe</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ##### Header Area Start ##### -->
    <header class="header-area">

        <!-- Top Header Area -->
        <div class="top-header">
            <div class="container h-100">
                <div class="row h-100 align-items-center">
                    <!-- Breaking News Area -->
                    <div class="col-12 col-sm-8">
                        <div class="breaking-news-area">
                            <div id="breakingNewsTicker" class="ticker">
                                <ul>
                                    <li><a href="#">Hello World!</a></li>
                                    <li><a href="#">Hello Universe!</a></li>
                                    <li><a href="#">Hello Original!</a></li>
                                    <li><a href="#">Hello Earth!</a></li>
                                    <li><a href="#">Hello Colorlib!</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- Top Social Area -->
                    <div class="col-12 col-sm-4">
                        <div class="top-social-area">
                            <h5>手动@全世界第一乖林小乖</h5>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- Logo Area -->
        <div class="logo-area text-center">
            <div class="container h-100">
                <div class="row h-100 align-items-center">
                    <div class="col-12">
                        <a href="index.html" class="original-logo"><img src="img/font/pic6.png" alt="" class="font"
                                style="display:none;width:800px"></a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Nav Area -->
        <div class="original-nav-area" id="stickyNav">
            <div class="classy-nav-container breakpoint-off">
                <div class="container">
                    <!-- Classy Menu -->
                    <nav class="classy-navbar justify-content-between">

                        <!-- Subscribe btn -->
                        <div class="subscribe-btn">
                            <a href="#" class="btn subscribe-btn" data-toggle="modal"
                                data-target="#subsModal">Subscribe</a>
                        </div>

                        <!-- Navbar Toggler -->
                        <div class="classy-navbar-toggler">
                            <span class="navbarToggler"><span></span><span></span><span></span></span>
                        </div>

                        <!-- Menu -->
                        <div class="classy-menu" id="originalNav">
                            <!-- close btn -->
                            <div class="classycloseIcon">
                                <div class="cross-wrap"><span class="top"></span><span class="bottom"></span></div>
                            </div>

                            <!-- Nav Start -->
                            <div class="classynav">
                                <ul>
                                    <li>

            
                                    <div class="classynav-login">
                                        <img class="classynav-img" src="img/material/pic8.jpg" alt="">
                                        <p>林小鹅</p>
                                    </div>
                                </li>
                                    <li><a href="login.html">login</a>
                                    <li><a href="index.html">Home</a></li>
                                    <li><a href="blog.html">blog</a></li>
                                    </li>
                                    <li><a href="diaries.html">DIARIES</a></li>
                                    <li><a href="friendshiplink.html">friendshiplink</a></li>
                                    <li><a href="comments.html">comments</a></li>
                                </ul>
                                <!-- Search Form  -->
                                <div id="search-wrapper">
                                    <form action="#">
                                        <input type="text" id="search" placeholder="Search something...">
                                        <div id="close-icon"></div>
                                        <input class="d-none" type="submit" value="">
                                    </form>
                                </div>
                            </div>
                            <!-- Nav End -->
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </header>
    <!-- ##### Header Area End ##### -->

    <!-- ##### Single Blog Area Start ##### -->
    <div class="single-blog-wrapper section-padding-0-100">

        <!-- Single Blog Area  -->
        <div class="single-blog-area blog-style-2 mb-50">
            <div class="single-blog-thumbnail">
                <img src="img/antiquity/pic40.jpg" alt="">
                <div class="post-tag-content">
                    <div class="container">
                        <div class="row">
                            <div class="col-12">
                                <div class="post-date">
                                    <a href="#">12 <span>march</span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <!-- ##### Post Content Area ##### -->
                <div class="col-12 col-lg-9">
                    <!-- Single Blog Area  -->

                    <!-- About Author -->

                    <!-- Comment Area Start -->
                    <div class="comment_area clearfix mt-70" id="comment-area-blog">
                        <h5 class="title">Comments</h5>

                        <!-- Single Comment Area -->
                        <li class="single_comment_area">
                            <!-- Comment Content -->
                            <div class="comment-content d-flex">
                                <!-- Comment Author -->
                                <div class="comment-author">
                                    <img src="img/material/pic2.jpg" alt="author">
                                </div>
                                <!-- Comment Meta -->
                                <div class="comment-meta">
                                    <a href="#" class="post-date">March 12</a>
                                    <p><a href="#" class="post-author">William James</a></p>
                                    <p>Efficitur lorem sed tempor. Integer aliquet tempor cursus. Nullam vestibulum
                                        convallis risus vel condimentum. Nullam auctor lorem in libero luctus, vel
                                        volutpat quam tincidunt.</p>
                                    <a href="#post-a-comment-area" class="comment-reply">Reply</a>
                                    <a href="javascript:" class="get">Delect</a>
                                </div>
                            </div>
                        </li>
                        <!-- Single Comment Area -->
                        <li class="single_comment_area">
                            <!-- Comment Content -->
                            <div class="comment-content d-flex">
                                <!-- Comment Author -->
                                <div class="comment-author">
                                    <img src="img/material/pic2.jpg" alt="author">
                                </div>
                                <!-- Comment Meta -->
                                <div class="comment-meta">
                                    <a href="#" class="post-date">March 12</a>
                                    <p><a href="#" class="post-author">William James</a></p>
                                    <p>Efficitur lorem sed tempor. Integer aliquet tempor cursus. Nullam
                                        vestibulum convallis risus vel condimentum. Nullam auctor lorem in
                                        libero luctus, vel volutpat quam tincidunt.</p>
                                    <a href="#post-a-comment-area" class="comment-reply">Reply</a>
                                    <a href="javascript:" class="get">Delect</a>
                                </div>
                            </div>
                        </li>

                        <!-- Single Comment Area -->
                        <li class="single_comment_area">
                            <!-- Comment Content -->
                            <div class="comment-content d-flex">
                                <!-- Comment Author -->
                                <div class="comment-author">
                                    <img src="img/material/pic2.jpg" alt="author">
                                </div>
                                <!-- Comment Meta -->
                                <div class="comment-meta">
                                    <a href="#" class="post-date">March 12</a>
                                    <p><a href="#" class="post-author">William James</a></p>
                                    <p>Efficitur lorem sed tempor. Integer aliquet tempor cursus. Nullam vestibulum
                                        convallis risus vel condimentum. Nullam auctor lorem in libero luctus, vel
                                        volutpat quam tincidunt.</p>
                                    <a href="#post-a-comment-area" class="comment-reply">Reply</a>
                                    <a href="javascript:" class="get">Delect</a>
                                </div>
                            </div>
                        </li>

                    </div>

                    <div class="post-a-comment-area mt-70" id="post-a-comment-area">
                        <h5>Leave a reply</h5>
                        <!-- Reply Form -->
                        <form action="#" method="post">
                            <div class="row">
                                <div class="col-12 col-md-6">
                                    <div class="group">
                                        <input type="text" name="name" id="name" required>
                                        <span class="highlight"></span>
                                        <span class="bar"></span>
                                        <label>Name</label>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <div class="group">
                                        <!-- <input type="email" name="email" id="email" required>
                                        <span class="highlight"></span>
                                        <span class="bar"></span>
                                        <label>Email</label> -->
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="group">
                                        <input type="text" name="subject" id="subject" required>
                                        <span class="highlight"></span>
                                        <span class="bar"></span>
                                        <label>Subject</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="group">
                                        <textarea name="message" id="message" required></textarea>
                                        <span class="highlight"></span>
                                        <span class="bar"></span>
                                        <label>Comment</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <a class="btn original-btn" id="blog-repaly">Reply</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- ##### Sidebar Area ##### -->
                <div class="col-12 col-md-4 col-lg-3">
                    <div class="post-sidebar-area">

                        <!-- Widget Area -->
                        <div class="sidebar-widget-area">
                            <form action="#" class="search-form">
                                <input type="search" name="search" id="searchForm" placeholder="Search">
                                <input type="submit" value="submit">
                            </form>
                        </div>

                        <!-- Widget Area -->
                        <div class="sidebar-widget-area">
                            <h5 class="title subscribe-title">Subscribe to my newsletter</h5>
                            <div class="widget-content">
                                <form action="#" class="newsletterForm">
                                    <input type="email" name="email" id="subscribesForm" placeholder="Your e-mail here">
                                    <button type="submit" class="btn original-btn">Subscribe</button>
                                </form>
                            </div>
                        </div>

                        <!-- Widget Area -->
                        <div class="sidebar-widget-area">
                            <h5 class="title">HelloWorld</h5>
                            <a href="#"><img src="img/antiquity/pic20.jpg" alt=""></a>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <!-- ##### Single Blog Area End ##### -->
        <div class="instagram-feed-area">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="insta-title">
                            <h5>手动@全世界第一大可爱林小乖</h5>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Instagram Slides -->
            <div class="instagram-slides owl-carousel">
                <!-- Single Insta Feed -->
                <div class="single-insta-feed">
                    <img src="img/instagram-img/1.png" alt="">
                    <!-- Hover Effects -->
                    <div class="hover-effects">
                        <a href="#" class="d-flex align-items-center justify-content-center"><i
                                class="fa fa-instagram"></i></a>
                    </div>
                </div>
                <!-- Single Insta Feed -->
                <div class="single-insta-feed">
                    <img src="img/instagram-img/2.png" alt="">
                    <!-- Hover Effects -->
                    <div class="hover-effects">
                        <a href="#" class="d-flex align-items-center justify-content-center"><i
                                class="fa fa-instagram"></i></a>
                    </div>
                </div>
                <!-- Single Insta Feed -->
                <div class="single-insta-feed">
                    <img src="img/instagram-img/3.png" alt="">
                    <!-- Hover Effects -->
                    <div class="hover-effects">
                        <a href="#" class="d-flex align-items-center justify-content-center"><i
                                class="fa fa-instagram"></i></a>
                    </div>
                </div>
                <!-- Single Insta Feed -->
                <div class="single-insta-feed">
                    <img src="img/instagram-img/4.png" alt="">
                    <!-- Hover Effects -->
                    <div class="hover-effects">
                        <a href="#" class="d-flex align-items-center justify-content-center"><i
                                class="fa fa-instagram"></i></a>
                    </div>
                </div>
                <!-- Single Insta Feed -->
                <div class="single-insta-feed">
                    <img src="img/instagram-img/5.png" alt="">
                    <!-- Hover Effects -->
                    <div class="hover-effects">
                        <a href="#" class="d-flex align-items-center justify-content-center"><i
                                class="fa fa-instagram"></i></a>
                    </div>
                </div>
                <!-- Single Insta Feed -->
                <div class="single-insta-feed">
                    <img src="img/instagram-img/6.png" alt="">
                    <!-- Hover Effects -->
                    <div class="hover-effects">
                        <a href="#" class="d-flex align-items-center justify-content-center"><i
                                class="fa fa-instagram"></i></a>
                    </div>
                </div>
                <!-- Single Insta Feed -->
                <div class="single-insta-feed">
                    <img src="img/instagram-img/7.png" alt="">
                    <!-- Hover Effects -->
                    <div class="hover-effects">
                        <a href="#" class="d-flex align-items-center justify-content-center"><i
                                class="fa fa-instagram"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <!-- ##### Instagram Feed Area End ##### -->

        <!-- ##### Footer Area Start ##### -->
        <footer class="footer-area text-center">
            <div class="container">
                <div class="row">
                    <div class="col-12">

                        <!-- Footer Nav Area -->
                        <div class="classy-nav-container breakpoint-off">
                            <!-- Classy Menu -->
                            <nav class="classy-navbar justify-content-center">

                                <!-- Navbar Toggler -->
                                <div class="classy-navbar-toggler">
                                    <span class="navbarToggler"><span></span><span></span><span></span></span>
                                </div>

                                <!-- Menu -->
                                <div class="classy-menu">

                                    <!-- close btn -->
                                    <div class="classycloseIcon">
                                        <div class="cross-wrap"><span class="top"></span><span class="bottom"></span>
                                        </div>
                                    </div>

                                    <!-- Nav Start -->
                                    <div class="classynav">
                                        <ul>
                                            <li><a href="#">Home</a></li>
                                            <li><a href="#">About Us</a></li>
                                            <li><a href="#">Lifestyle</a></li>
                                            <li><a href="#">travel</a></li>
                                            <li><a href="#">Music</a></li>
                                            <li><a href="#">Contact</a></li>
                                        </ul>
                                    </div>
                                    <!-- Nav End -->
                                </div>
                            </nav>
                        </div>

                        <!-- Footer Social Area -->
                        <div class="footer-social-area mt-30">

                        </div>
                    </div>
                </div>
            </div>

        </footer>
        <!-- ##### Footer Area End ##### -->

        <!-- jQuery (Necessary for All JavaScript Plugins) -->
        <script src="js/jquery/jquery-2.2.4.min.js"></script>
        <!-- Popper js -->
        <script src="js/popper.min.js"></script>
        <!-- Bootstrap js -->
        <script src="js/bootstrap.min.js"></script>
        <!-- Plugins js -->
        <script src="js/plugins.js"></script>
        <!-- Active js -->
        <script src="js/active.js"></script>
        <!-- Index js -->
        <script src="js/index.js"></script>
        <!-- <script>$('.col-12').fadeIn(10000);</script> -->
</body>

</html>
<script>
    $(function() {
        // $('.get').click(function() {
        //     $('.single_comment_area').hide();
        //     // $('#j_mask').hide();
        // })
        $('#blog-repaly').click(function() {
            // alert("dsfjksdhf");
            var txtName = $('#name').val();
            // var txtEmail = $('#email').val();
            var txtSubject = $('#subject').val();
            var txtComment = $('#message').val();
            // alert(txtComment);
            //设置当前时间
            function getCurrDate() {
                var date = new Date();
                var sep = "-";
                var year = date.getFullYear(); //获取完整的年份(4位)
                var month = date.getMonth() + 1; //获取当前月份(0-11,0代表1月)
                var day = date.getDate(); //获取当前日
                if (month <= 9) {
                    month = "0" + month;
                }
                if (day <= 9) {
                    day = "0" + day;
                }
                var currentdate = year + sep + month + sep + day;
                return currentdate;
            }
            var date = new Date();
            var year = date.getFullYear(); //获取完整的年份(4位)
            var month = date.getMonth() + 1; //获取当前月份(0-11,0代表1月)
            var day = date.getDate(); //获取当前日
            {
                var num_mon_arr = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11',
                    '12'
                ]; //中文参照
                var current_month = month; //月份中文名
                var en_mon_arr = ["January", "February", "March", "April", "May", "June", "July",
                    "August", "September", "October",
                    "November", "December"
                ]; //英文月份
                for (var i = 0; i < num_mon_arr.length; i++) { //循环匹配
                    if (current_month == num_mon_arr[i]) {
                        current_month = en_mon_arr[i];
                    }
                }
            }
            //3.2把用户输入的课程名称和所属学院，创建出一个tr
            var $liNew = $('<li class = "single_comment_area">' +
                '<div class="comment-content d-flex">' +
                '<div class="comment-author"> <img src="img/material/pic2.jpg" alt="author"></div>' +
                '<div class="comment-meta">' +
                '<a href="#" class="post-date">' + current_month + '&nbsp' + day + '</a>' +
                '<p><a href="#" class="post-author">' + txtName + '</a></p>' +
                '<p>' + txtComment + '</p>' +
                '<a href="#post-a-comment-area" class="comment-reply">Reply</a>' +
                '<a href="javascript:" class="get">Delect</a>' +
                '</div>' +
                '</div>' +
                '</li>');
            alert($liNew);
            //给新创建的这个$liNew里面的a标签添加一个事件
            $liNew.find('.get').click(function() {
                // $(this).parent.parent.remove();
                $liNew.remove();
            })
            // alert(liNew);
            // //3.3把新创建的li添加到tbody中
            $('#comment-area-blog').append($liNew);
            alert($('#comment-area-blog ol'));
        })
        $('#comment-area-blog').on('click', '.get', function() {
            //jQuery为了使用方便，把this给改了
            $(this).parent().parent().parent().remove();
        })
    });
</script>